<script setup lang="ts">
import { getPeopleBuyData_c, getAllPeopleBuyData_c, getMiaosha_c, getCateData_c, getColaMiaoData_c } from '@/api/lidare'
import { ref, onMounted, computed } from 'vue'
import { useRouter } from 'vue-router'
import type { PeopleBuys, AllPeoples, ColaOpens, ColaGIf, AdList, ColaMiaos } from '@/type/typings'
import PhoneDataCard from '@/components/home/PhoneDataCard.vue'

const router = useRouter();

const time = computed(() => {
  return new Date(ColaMiaoData.value.time).getTime() - Date.now() || 0
})

const kw = ref('')


// 大家都在买数据
const peopleBuyData = ref(<Array<PeopleBuys>>([]));
const spuListData = ref(<Array<AllPeoples>>([]));

// 可乐开箱
const colaOpentData = ref(<ColaOpens>({}));

// 可乐开箱gif和img
const colaImgList = ref(<Array<ColaGIf>>([]))

// 分类列表数据
const cateData = ref(<Array<AdList>>([]))

// 秒杀专场图片
const miaoshaData = ref(<Array<AdList>>([]))

// 可乐秒杀数据
const ColaMiaoData = ref(<ColaMiaos>({}))

onMounted(async () => {

  let { data } = await getPeopleBuyData_c();
  peopleBuyData.value = data._data.data

  let { data: data1 } = await getAllPeopleBuyData_c();
  spuListData.value = data1._data.list[0].ext.spuList
  colaOpentData.value = data1._data.list[1]
  colaImgList.value = data1._data.list[1].ext.imageList

  let { data: data3 } = await getMiaosha_c()
  miaoshaData.value = data3._data.adList

  let { data: data5 } = await getColaMiaoData_c()
  ColaMiaoData.value = data5._data.subject
  console.log(ColaMiaoData.value, '111');

  loading.value = true

  let { data: data4 } = await getCateData_c()
  cateData.value = data4._data.adList


})


// 去到搜索页面进行搜索缓存
const historyData = ref(<Array<string>>([]));
historyData.value = JSON.parse(localStorage.getItem('historyList') as string) || [];
const goToSearch = (val: string) => {
  historyData.value = historyData.value.filter(o => o != val)
  historyData.value = [val, ...historyData.value]
  localStorage.setItem("historyList", JSON.stringify(historyData.value));
  router.push(`/searchResult/${val}`)
}

const loading = ref(false)

</script>


<template>
  <div class="home">
    <header class="header">
      <div class="header-top">
        <div class="header-log-content">
          <img src="@/assets/images/home/left_log.png" alt="" class="left-log">
          <div class="white-line"></div>
          <div>
            <van-notice-bar :scrollable="false">
              <van-swipe vertical class="notice-swipe" :autoplay="3000" :touchable="false" :show-indicators="false">
                <van-swipe-item>1折买手机</van-swipe-item>
                <van-swipe-item>告别专卖店</van-swipe-item>
              </van-swipe>
            </van-notice-bar>
          </div>
        </div>
        <div class="right-icon">
          <img src="@/assets/images/home/long.png" alt="">
          <div class="kefu">客服</div>
        </div>
      </div>
      <div class="header-bottom" @click.stop="$router.push('/search')">
        <van-icon name="search" v-if="loading" />
        <div class="tejia">清仓特价</div>
      </div>
    </header>
    <div class="banner-bg" @click.stop="$router.push('/miaosha')">
      <van-skeleton title :row="2" v-if="!loading" />
      <img :src="miaoshaData[0]?.content" alt="" v-else>
    </div>
    <div class="stratagem" @click.stop="$router.push('/coladesc')">
      <img src="@/assets/images/home/stratagem.png" alt="">
      <div class="stratagem-text">
        <span>官方质检</span> |
        <span>180天质保</span> |
        <span>顺丰包邮</span> |
        <span>全场免息</span> >
      </div>
    </div>
    <div class="home-cate-ke">
      <div class="cate-box">
        <div class="cate-item" v-for="(s, i) in cateData" :key="i" @click.stop="$router.push('/class')">
          <img :src="s.content" alt="">
          <div class="cate-title">{{ s.title }}</div>
        </div>
      </div>
      <div class="kele-open">
        <div class="kele-open-box" @click.stop="$router.push('/colazb')">
          <van-skeleton title avatar :row="2" v-show="!loading" />
          <div class="open-top" v-show="loading">
            <span class="open-title">可乐开箱</span>
            <img :src="colaOpentData.iconUrl" alt="" class="xianshi">
          </div>
          <div class="open-bottom" v-show="loading">
            <img :src="colaImgList[0]?.imageUrl" alt="" class="img-gif">
            <img :src="colaImgList[1]?.imageUrl" alt="" class="img-keji">
          </div>
        </div>
        <div class="kele-miaos" @click.stop="$router.push('/miaosha')">
          <van-skeleton title avatar :row="2" v-if="!loading" />
          <div class="open-top" v-show="loading">
            <span class="open-title">可乐秒杀</span>
            <div class="timed">
              <van-count-down :time="time" class="timers">
                <template #default="timeData">
                  <span class="block">{{ timeData.hours >= 10 ? timeData.hours : '0' + timeData.hours }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.minutes >= 10 ? timeData.minutes : '0' + timeData.minutes }}</span>
                  <span class="colon">:</span>
                  <span class="block">{{ timeData.seconds >= 10 ? timeData.seconds : '0' + timeData.seconds }}</span>
                </template>
              </van-count-down>
            </div>
          </div>
          <div class="open-bottom" v-show="loading">
            <van-swipe :autoplay="4000" lazy-render :show-indicators="false" v-if="ColaMiaoData.time">
              <van-swipe-item v-for="item in ColaMiaoData.list" :key="item.id" class="swiper-item">
                <img :src="item.image" alt="">
                <div class="item-info-text">
                  <div class="text-title fd">{{ item.productName }}</div>
                  <div class="text-new-price">
                    <span>￥</span>
                    <span>{{ item.salesPriceYuan }}</span>
                  </div>
                  <div class="text-old-price">
                    新机价:￥{{ item.referencePriceYuan }}
                  </div>
                </div>
                <div class="item-low-bg">
                  <span class="low">降</span>
                  <span class="low-price">￥{{ Number(item.referencePriceYuan) - Number(item.salesPriceYuan) }}</span>
                </div>
              </van-swipe-item>
            </van-swipe>
            <div v-else class="coming-soon">
              <img src="@/assets/images/home/colamiaosha.png" alt="">
            </div>
          </div>
        </div>
      </div>
      <div class="huishou-bg" @click.stop="$router.push('/colahs')">
        <img src="@/assets/images/home/huishou_bg.png" alt="">
      </div>
      <div class="all-people">
        <div class="people-title">大家都在买</div>
        <van-notice-bar :scrollable="false">
          <van-swipe vertical class="notice-swipe2" :autoplay="3000" :touchable="false" :show-indicators="false">
            <van-swipe-item v-for="p in peopleBuyData" :key="p.phone">{{ p.phone }}刚刚购买了{{ p.productName
            }}</van-swipe-item>
          </van-swipe>
        </van-notice-bar>
      </div>
      <div class="all-people-box">
        <div class="all-people-list">
          <div class="people-item" v-for="s in spuListData" :key="s.id" @click.stop="goToSearch(s.productName)">
            <p class="phone-style">{{ s.productName }}</p>
            <p class="people-num">{{ s.describe }}</p>
          </div>
        </div>
      </div>
    </div>
    <PhoneDataCard :top="90" :keyword="kw" :phId="'1'" />
  </div>
</template>

<style lang="scss" scoped>
.home {
  width: 100%;
  color: var(--text-black);
  padding-bottom: .5rem;

  .header {
    width: 100%;
    height: .9rem;
    background-color: var(--home-red);
    padding: .15rem .1rem 0;
    box-sizing: border-box;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;

    .header-top {
      display: flex;
      align-items: center;
      justify-content: space-between;
    }

    .header-log-content {
      display: flex;
      align-items: center;
    }

    .left-log {
      width: .64rem;
      height: .2rem;
    }

    .white-line {
      width: .02rem;
      height: .2rem;
      background-color: var(--bgc-white);
      margin-left: .05rem;
      margin-right: .05rem;

    }

    .notice-swipe {
      height: .2rem;
      line-height: .2rem;
      color: #fff;
      font-size: .18rem;
      font-weight: 800;
    }

    ::v-deep(.van-notice-bar) {
      width: 1.2rem;
      background-color: var(--home-red)s;
    }

    .right-icon {
      img {
        width: .2rem;
        height: .18rem;
      }

      .kefu {
        font-size: .12rem;
        font-weight: 400;
        color: #fff;
      }
    }

    .header-bottom {
      width: 3.55rem;
      height: .28rem;
      border-radius: 999px;
      background-color: #fff;
      display: flex;
      justify-content: center;
      align-items: center;

      .tejia {
        color: #a59595;
        font-size: .14rem;
        margin-left: .05rem;
      }
    }

  }

  .banner-bg {
    width: 100%;
    margin-top: .9rem;

    img {
      width: 100%;
      display: block;
    }
  }

  .stratagem {
    width: 100%;
    height: .35rem;
    padding: .12rem;
    box-sizing: border-box;
    background-color: var(--white);
    display: flex;
    justify-content: space-between;
    align-items: center;

    img {
      width: 1.08rem;
      height: .16rem;
    }

    .stratagem-text {
      font-size: .12rem;
    }
  }

  .home-cate-ke {
    padding: .1rem;
    width: 100%;
    background-color: #f6f7fa;
    box-sizing: border-box;

    .cate-box {
      width: 100%;
      display: flex;
      flex-wrap: wrap;
    }

    .cate-item {
      width: .58rem;
      height: .8rem;
      text-align: center;
      margin-right: .15rem;
      margin-bottom: .05rem;

      &:nth-child(5n) {
        margin-right: 0;
      }

      img {
        width: .56rem;
        height: .56rem;
        border-radius: 50%;
      }

      .cate-title {
        font-size: .13rem;
        font-weight: 400;
        margin-top: .05rem;
      }
    }

    .kele-open {
      display: flex;
      margin-top: .07rem;

      >div {
        width: 1.76rem;
        height: 1.2rem;
        background-color: #fff;
        border: 1px solid #f2f2f2;
        padding: 10px 8px;
        box-sizing: border-box;
      }

      .kele-open-box {
        margin-right: 1px;

        .open-top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .open-title {
            font-size: .16rem;
            color: #000;
            font-weight: bold;
          }

          .xianshi {
            width: .56rem;
            display: block;
          }

        }

        .open-bottom {
          margin-top: .12rem;
          display: flex;
          justify-content: space-between;

          .img-gif {
            width: .66rem;
            display: block;
          }

          .img-keji {
            width: .87rem;
            display: block;
          }


        }

      }

      .kele-miaos {
        .open-top {
          display: flex;
          align-items: center;
          justify-content: space-between;

          .open-title {
            font-size: .16rem;
            color: #000;
            font-weight: bold;
          }

          .timed {
            width: .74rem;
            display: block;
            margin-right: 8px;
          }

          .timers {
            display: flex;
            overflow: hidden;
          }

          .colon {
            display: inline-block;
            margin: 0 .02rem;
            line-height: .16rem;
            color: var(--home-red);
          }

          .block {
            display: inline-block;
            width: .22rem;

            color: #fff;
            height: .16rem;
            line-height: .16rem;
            font-size: .12rem;
            text-align: center;
            padding: 0 .03rem;
            background-color: var(--home-red);
          }

        }
      }

      .open-bottom {
        margin-top: .12rem;

        .coming-soon {
          img {
            width: 1.56rem;
            display: block;
          }
        }
      }

      .swiper-item {
        width: 100%;
        height: .7rem;
        background-color: #fff;
        display: flex;
        position: relative;

        img {
          width: .67rem;
        }

        .item-low-bg {
          position: absolute;
          width: .67rem;
          height: .24rem;
          line-height: .24rem;
          bottom: .03rem;
          left: 0;
          background: url(@/assets/images/plant/1678187437277.png);
          color: #fff;
          background-size: contain;
        }

        .low {
          font-size: .14rem;
          margin-left: 5px;
        }

        .low-price {
          font-size: .13rem;
          font-style: italic;
          font-weight: bold;

        }

        .item-info-text {
          margin-left: .08rem;
        }

        .text-title {
          width: .85rem;
          font-size: .12rem;
          color: #000;
          font-weight: bold;
        }

        .text-new-price {
          font-size: .14rem;
          font-weight: 800;
          color: var(--home-red);
          margin-top: .06rem;
          font-style: italic;
        }

        .text-old-price {
          font-size: 12px;
          color: #ccc;
          text-decoration: line-through;
          margin-top: .05rem;
        }




      }

    }

    .huishou-bg {
      margin-top: .07rem;

      img {
        width: 3.55rem;
        height: .78rem;
        border: radius .1rem;

      }
    }

    .all-people {
      margin-top: .14rem;
      color: #000;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .notice-swipe2 {
        height: .2rem;
        line-height: .2rem;
        color: #000;
        font-size: .12rem;
        font-weight: 400;
        text-align: right;
        padding: 0 .03rem;
      }

      ::v-deep(.van-notice-bar) {
        width: 2.4rem;
        background-color: #f6f7fa;
        color: #000;
      }

      .people-title {
        font-size: .16rem;
        font-weight: 600;
      }

    }


    .all-people-box {
      box-sizing: border-box;
      overflow-x: auto;
      margin-top: .05rem;
    }

    .all-people-box::-webkit-scrollbar {
      display: none;
    }

    .all-people-list {
      display: flex;
      flex-wrap: wrap;
      width: 7rem;

      .people-item {
        height: .40rem;
        background-color: var(--bgc-white);
        padding: .04rem .06rem;
        border-radius: .04rem;
        margin-right: .10rem;
        margin-bottom: .1rem;
      }

      .phone-style {
        font-size: .13rem;
        color: #000;
        font-weight: 500;
      }

      .people-num {
        color: #f9334b;
        font-size: .12rem;
      }

    }
  }
}
</style>
